<template>
  <view id="MyCustomerServicePage">
    <view class="Company">
      <view class="Rendering" v-for="(item, index) in list" :key="index">
        <view class="R-image">
          <image :src="item.icon" style="width: 10vw; height: 10vw" />
          <view v-if="item.icon == ''" style="text-align: center; width: 100%">
            <text style="margin-left: -60%">平台</text>
          </view>
        </view>

        <view class="R-text">
          <text>{{ item.text }}</text>
          &nbsp;
          <text>{{ item.details }}</text>
        </view>
      </view>
      <view class="footer">
        <view class="footer-left"></view>
        <view class="footer-text">
          <text>扫一扫缘分到</text>
        </view>
        <view class="footer-right"></view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
// 公司电话
import CompanPhoneIcon from '@/static/CustomerService/PHONE.png'
// 公司微信
import CompanWeChatIcon from '@/static/CustomerService/CompanyWeChat.png'
// 公司QQ
import CompanQQIcon from '@/static/CustomerService/CompanyQQ.png'
// 公司邮箱
import CompanEmailIcon from '@/static/CustomerService/CompanyEmail.png'
// 公司地址
import CompanAddressIcon from '@/static/CustomerService/location.png'
// 公司手机
import CompanyMobilePhoneIcon from '@/static/CustomerService/CompanyMobilePhone.png'

interface ListInfoData {
  text: string
  icon: string
  details: string
}
type ListInfo = ListInfoData[]
const list = reactive<ListInfo>([
  {
    text: '电话:',
    icon: CompanPhoneIcon,
    details: '18618516819',
  },
  {
    text: '手机:',
    icon: CompanyMobilePhoneIcon,
    details: '联谊高端婚恋|恋爱行动派',
  },
  {
    text: '微信:',
    icon: CompanWeChatIcon,
    details: '投诉/合作:18618516819',
  },
  {
    text: 'QQ:',
    icon: CompanQQIcon,
    details: '北京优质青年靠谱的实名制婚恋',
  },
  {
    icon: '',
  },
  {
    text: '邮箱:',
    icon: CompanEmailIcon,
    details: '1926789696@qq.com',
  },
  {
    text: '地址:',
    icon: CompanAddressIcon,
    details: '北京市海淀区中关村南大街27号(请提前预约)',
  },
])
</script>

<style lang="scss" scoped>
#MyCustomerServicePage {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  padding: 3%;
  box-sizing: border-box;

  .Company {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;

    .Rendering {
      width: 100%;
      height: 11%;
      background-color: #f5f5f5;
      border-radius: 20rpx;
      padding: 2%;
      display: flex;
      align-items: center;

      .R-image {
        width: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .R-text {
        width: 70%;
        font-size: 3.5vw;
      }
    }

    .footer {
      width: 100%;
      height: 5%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .footer-left {
        height: 1%;
        width: 33%;
        background-color: #ddd;
      }

      .footer-text {
        width: 34%;
        text-align: center;
        color: #ccc;
        font-size: 4vw;
      }

      .footer-right {
        height: 1%;
        width: 33%;
        background-color: #ddd;
      }
    }
  }
}
</style>
